<template>
  <view v-if="visible" class="mask" @tap="$emit('sos-close')">
    <view class="sheet" @tap.stop>
      <view class="title">紧急联系人</view>
      <view class="desc">将于 <text class="count">{{countdown}}</text> 秒后自动拨打</view>
      <view class="list">
        <view class="row" v-for="(c,i) in contacts" :key="i">
          <text>{{c.name}}</text>
          <text>{{c.phone}}</text>
        </view>
      </view>
      <view class="actions">
        <button class="btn cancel pressable" @tap="$emit('sos-close')">取消</button>
        <button class="btn call pressable" @tap="$emit('sos-call')">立即拨打</button>
      </view>
    </view>
  </view>
</template>

<script>
export default{ name:'EmergencySos', props:{ visible:Boolean, countdown:Number, contacts:Array } }
</script>

<style scoped>
.mask{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;z-index:1001}
.sheet{width:100%;background:#fff;border-top-left-radius:20rpx;border-top-right-radius:20rpx;padding:20rpx}
.title{font-size:32rpx;color:#2D3047}
.desc{margin-top:6rpx;color:#666}
.count{color:#FF6B35;font-weight:700}
.list{margin-top:12rpx}
.row{display:flex;align-items:center;justify-content:space-between;background:#fafafa;border-radius:12rpx;padding:12rpx 16rpx;margin-top:8rpx}
.actions{display:flex;gap:12rpx;margin-top:16rpx}
.btn{flex:1;height:88rpx;border-radius:16rpx}
.btn.cancel{background:#eee;color:#333}
.btn.call{background:linear-gradient(135deg,#FF375F,#FF6B35);color:#fff}
</style>



